import { ClockCircleFilled } from "@ant-design/icons";
import classNames from "classnames";
import React from "react";

export interface ProgressProps {
  prefixCls: string;
  percent: number;
}

const Progress: React.FC<ProgressProps> = (props) => {
  const { prefixCls: basePrefixCls, percent } = props;

  const prefixCls = `${basePrefixCls}-progress`;
  const bgColor = "#0066FF";
  const fgColor = "rgba(0, 136, 255, 0.36)";

  if (percent !== undefined) {
    return (
      <div
        className={classNames(`${prefixCls}-icon-percent`, `${prefixCls}-icon`)}
        style={{
          backgroundImage: `conic-gradient(${fgColor} ${percent}%, ${bgColor} ${percent}% 100%)`,
        }}
      />
    );
  }

  return (
    <div className={classNames(`${prefixCls}-icon`)}>
      <ClockCircleFilled style={{ color: bgColor }} />
    </div>
  );
};

export default Progress;
